<template>
  <div class="archive-selector-example">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>档案选择示例</span>
        </div>
      </template>

      <!-- 颜色档案选择（单选） -->
      <div class="selector-item">
        <el-button type="primary"
                   @click="showColorSelector">
          选择颜色（单选）
        </el-button>
        <div v-if="selectedColor"
             class="selected-info">
          已选颜色：{{ selectedColor.colorName }}
        </div>
      </div>

      <!-- 客户档案选择（多选） -->
      <div class="selector-item">
        <el-button type="primary"
                   @click="showCustomerSelector">
          选择客户（多选）
        </el-button>
        <div v-if="selectedCustomers && selectedCustomers.length > 0"
             class="selected-info">
          <div>已选客户：</div>
          <el-tag v-for="customer in selectedCustomers"
                  :key="customer.id"
                  class="customer-tag"
                  closable
                  @close="removeCustomer(customer)">
            {{ customer.companyName }}
          </el-tag>
        </div>
      </div>
    </el-card>

    <!-- 颜色选择器（单选） -->
    <ArchiveSelector v-model="colorSelectorVisible"
                     title="选择颜色"
                     :search-fields="colorSearchFields"
                     :table-columns="colorTableColumns"
                     :fetch-data-api="getColorList"
                     :multiple="false"
                     @confirm="handleColorSelect" />

    <!-- 客户选择器（多选） -->
    <ArchiveSelector v-model="customerSelectorVisible"
                     title="选择客户"
                     :search-fields="customerSearchFields"
                     :table-columns="customerTableColumns"
                     :fetch-data-api="getCustomerList"
                     :multiple="true"
                     @confirm="handleCustomerSelect" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ArchiveSelector from '@/components/common/ArchiveSelector.vue'
import { getListApi as getColorListApi } from '@/api/color'
import { getListApi as getCustomerListApi } from '@/api/companyCustomer'
import type { Color } from '@/api/color/type'
import type { CompanyCustomer } from '@/api/companyCustomer/type'

// 选择器显示状态
const colorSelectorVisible = ref(false)
const customerSelectorVisible = ref(false)

// 选中的数据
const selectedColor = ref<Color>()
const selectedCustomers = ref<CompanyCustomer[]>([])

// 颜色档案配置
const colorSearchFields :Array<{
  label: string
  prop: string
  type: 'input' | 'select'
  options?: Array<{ label: string; value: any }>
}>= [
  { label: '颜色编码', prop: 'colorCode', type: 'input' },
  { label: '颜色名称', prop: 'colorName', type: 'input' },
  {
    label: '状态',
    prop: 'isActive',
    type: 'select',
    options: [
      { label: '启用', value: "0" },
      { label: '禁用', value: '1' },
    ],
  },
]

const colorTableColumns = [
  { prop: 'colorCode', label: '颜色编码', width: 120 },
  { prop: 'colorName', label: '颜色名称', width: 120 },
  { prop: 'description', label: '描述' },
]

// 客户档案配置
const customerSearchFields :Array<{
  label: string
  prop: string
  type: 'input' | 'select'
  options?: Array<{ label: string; value: any }>
}>= [
  { label: '公司代码', prop: 'companyCode', type: 'input' },
  { label: '公司名称', prop: 'companyName', type: 'input' },
  { label: '联系人', prop: 'contactName', type: 'input' },
]

const customerTableColumns = [
  { prop: 'companyCode', label: '公司代码', width: 120 },
  { prop: 'companyName', label: '公司名称', width: 200 },
  { prop: 'contactName', label: '联系人', width: 120 },
  { prop: 'contactPhone', label: '联系电话', width: 120 },
  { prop: 'address', label: '地址' },
]

// 显示选择器
const showColorSelector = () => {
  colorSelectorVisible.value = true
}

const showCustomerSelector = () => {
  customerSelectorVisible.value = true
}

// 处理选择结果
const handleColorSelect = (color: Color) => {
  selectedColor.value = color
}

const handleCustomerSelect = (customers: CompanyCustomer[]) => {
  selectedCustomers.value = customers
}

// 移除已选客户
const removeCustomer = (customer: CompanyCustomer) => {
  selectedCustomers.value = selectedCustomers.value.filter(
    (item) => item.id !== customer.id
  )
}

// API 封装
const getColorList = (params: any) => {
  return getColorListApi(params)
}

const getCustomerList = (params: any) => {
  return getCustomerListApi(params)
}
</script>

<style lang="scss" scoped>
.archive-selector-example {
  padding: 20px;

  .selector-item {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .selected-info {
    margin-top: 10px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }

  .customer-tag {
    margin-right: 8px;
    margin-top: 8px;
  }
}
</style>
